<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入小区或地址"
      style="background-color: #21b97a"
    >
      <template #action>
        <div @click="onSearch">
          <van-icon name="map-marked" size="25" color="#fff" class="add-icon" />
        </div>
      </template>
      <template #left
        ><van-icon
          name="arrow-left"
          color="#fff"
          size="20"
          class="back-icon" /></template
    ></van-search>
    <van-sticky>
      <van-dropdown-menu>
        <van-dropdown-item title="区域">
          <van-picker
            show-toolbar
            :columns="columns"
            toolbar-position="bottom"
          />
        </van-dropdown-item>
        <van-dropdown-item title="方式" v-model="value1" :options="option1">
          <van-picker show-toolbar toolbar-position="bottom" />
        </van-dropdown-item>
        <van-dropdown-item title="租金" />
        <van-dropdown-item title="筛选" @open="show = true" />
      </van-dropdown-menu>
    </van-sticky>
    <div style="height: 2000px"></div>
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '80%' }"
      >内容</van-popup
    >
  </div>
</template>
<script>
// 效果实现
// 有些时候后台给的接口直接用不了，需要自己加工处理一下
// 数据不满足要求，自己要处理加工一下
// 数组有二份一份是原始 一份处理 取消就变成原始
// import { getConditionList } from '@/api/home'

import axios from 'axios'
export default {
  name: 'find-page',
  data() {
    return {
      value1: 0,
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      value: '',
      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
      show: false,
      // params: {
      //   各种参数
      // }
      async created() {
        const res = await axios.get(
          'http://liufusong.top:8080/houses?cityId=AREA%7Cdbf46d32-7e76-1196&stat=20&end=29'
        )
        console.log(res)
      }
    }
  },
  methods: {}
}
// this.params.key = '新的值' 重新发请求
</script>

<style scoped lang="less"></style>
